<!DOCTYPE html>
<html ng-app="myapp">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <title>发现的主页</title>

    <link rel="stylesheet" href="../js/jqm/jquery.mobile-1.4.5.css"/>
    <!--<link rel="stylesheet" href="../js/jqm/jquery.mobile.theme-1.4.5.css"/>-->
    <link rel="stylesheet" href="../css/public.css"/>
    <link rel="stylesheet" href="../css/DiscoveryHome.css"/>
</head>
<body>
<div data-role="page" class="pagediv" id="pageOne">
    <div data-role="header" data-position="fixed" class="header">
        <div>
            成都
            <!--<span class="iconfont">&#xe631;</span>-->
        </div>
        <div>
            <a href="#pageTwo" data-transition="slide">
                <input id="header-input" type="text" data-type="search" placeholder="搜索店铺、攻略"/>
            </a>
        </div>
    </div>
    <div role="main" class="content">
             <div class="ui-grid-c content-fontface">
                 <div class="ui-block-a"><span class="iconfont">&#xe63a;</span><p>中餐<br><span>Chinese&food</span></p></div>
                 <div class="ui-block-b"><span class="iconfont">&#xe63b;</span><p>火锅<br><span>Hot&pot</span></p></div>
                 <div class="ui-block-c"><span class="iconfont">&#xe639;</span><p>串串<br><span>String</span></p></div>
                 <div class="ui-block-d"><span class="iconfont">&#xe63c;</span><p>甜品<br><span>Dessert</span></p></div>
             </div>

             <p class="content-HotArea">热门商圈•HotArea</p>

             <!--<hr/>-->
            <div style="height: 1px;background-color: #ddd"></div>

             <div class="ui-grid-c content-shangye" id="content-shangye">
                 <div class="ui-block-a"><a href="#" class="ui-btn ui-btn-a">春熙路</a></div>
                 <div class="ui-block-b"><a href="#" class="ui-btn">科华路</a></div>
                 <div class="ui-block-c"><a href="#" class="ui-btn">建设路</a></div>
                 <div class="ui-block-d"><a href="#" class="ui-btn">万年场</a></div>
                 <!--第二排-->
                 <div class="ui-block-a"><a href="#" class="ui-btn">太古里</a></div>
                 <div class="ui-block-b"><a href="#" class="ui-btn">盐市口</a></div>
                 <div class="ui-block-c"><a href="#" class="ui-btn">城南</a></div>
                 <div class="ui-block-d"><a href="#" class="ui-btn iconfont" id="content-shangye-mya">&#xe631;</a></div>

                 <div class="ui-block-a myui-hide"><a href="#" class="ui-btn">春熙路</a></div>
                 <div class="ui-block-b myui-hide"><a href="#" class="ui-btn">科华路</a></div>
                 <div class="ui-block-c myui-hide"><a href="#" class="ui-btn">建设路</a></div>
                 <div class="ui-block-d myui-hide"><a href="#" class="ui-btn">万年场</a></div>

                 <div class="ui-block-a myui-hide"><a href="#" class="ui-btn">春熙路</a></div>
                 <div class="ui-block-b myui-hide"><a href="#" class="ui-btn">科华路</a></div>
                 <div class="ui-block-c myui-hide"><a href="#" class="ui-btn">建设路</a></div>
                 <div class="ui-block-d myui-hide"><a href="#" class="ui-btn">万年场</a></div>
             </div>

             <!--热门榜单-->
             <p class="content-HotArea">热门榜单•HotRanking</p>

             <!--<hr/>-->
             <div style="height: 1px;background-color: #ddd"></div>


             <div id="content-HotArea-tu">
                 <div class="right"><a href="Listofdetails.html?id=1" target="_top" data-transition="slide"><img src="../images/public/9.jpg" alt="1"></a></div>
                 <div class="left"><a href="Listofdetails.html?id=2" target="_top" data-transition="slide"><img src="../images/public/9.jpg" alt="1"></a></div>
                 <div class="right"><a href="Listofdetails.html?id=3" target="_top" data-transition="slide"><img src="../images/public/9.jpg" alt="1"></a></div>
                 <div class="left"><a href="Listofdetails.html?id=4" target="_top" data-transition="slide"><img src="../images/public/9.jpg" alt="1"></a></div>
             </div>

             <!--随便看看-->

             <p class="content-HotArea" style="margin-top: .5rem">随便看看•Random</p>

             <!--<hr>-->
            <div style="height: 1px;background-color: #ddd"></div>

            <div class="content-random" ng-controller="random" ng-init="CasualLook()">
                <figure ng-repeat="s in myrandom" ng-class="{left: !$even,right:!$odd}">       <!--ng-class="{true:right,false:left}[s%2 ? false : true]"-->
                    <div style="background: url({{'../images/public/'+s.image_src}}) center center no-repeat;-webkit-background-size:cover;padding: 3em">                                                                                           <!--{ left: !$even,right: !$odd }-->
                        <!--<img src="../images/DiscoveryHome/random.png" alt="1">-->
                        <!--<img ng-src="{{'../images/public/'+s.image_src}}" alt="1">-->
                    </div>
                    <article>
                        <!--<p class="content-random-p">美女老板秘制的米椒雀胗</p>-->
                        <p class="content-random-p" ng-bind="s.article_title"></p>
                        <!--<span class="content-random-span">武侯区 科华北路</span>-->
                        <span class="content-random-span" ng-bind="s.shop_address"></span>
                    </article>
                </figure>
            </div>
    </div>
    <div id="page-footer" data-role="footer" data-position="fixed" class="footer">
        <div class="ui-grid-c footer-div">
            <div class="ui-block-a iconfont one">
                &#xe609;
                <div>精选</div>
            </div>
            <div class="ui-block-b iconfont two">
                &#xe61a;
                <div>新鲜</div>
            </div>
            <div class="ui-block-c iconfont three">
                &#xe633;
                <div>发现</div>
            </div>
            <div class="ui-block-d iconfont four">
                &#xe60b;
                <div>我</div>
            </div>
        </div>
    </div>

</div>


<!--pangeTwo-->
<!--<div data-role="page" id="pageTwo">-->
    <!--<div data-role="header" class="pageTwo-header">-->
        <!--<div>&#xe60d;</div>-->
        <!--<div>-->
            <!--<input id="pageTwo-header-input" type="text" data-type="search" placeholder="搜索店铺、攻略"/>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->

<!--第二页-->
<div data-role="page" id="pageTwo">
    <div data-role="header" class="pageTwo-header">
        <div>
            <a href="#pageOne" class="iconfont">&#xe606;</a>
        </div>
        <div>
            <input id="pageTwo-header-input" type="text" data-type="search" placeholder="搜索店铺、攻略"/>
        </div>
    </div>

    <!--<hr style="clear: left;border: 1px solid #d4d4d4;">-->
    <div style="clear: left;height: 1px;background-color: #ddd"></div>

    <div data-role="main" class="pageTwo-main">
        <div class="pageTwo-main-hotSearch">
            <p>热门搜索</p>
            <div class="ui-grid-b">
                <div class="ui-block-a"><a href="#" class="ui-btn pageTwo-main-a" style="color: #9b845f;">火锅</a></div>
                <div class="ui-block-b"><a href="#" class="ui-btn pageTwo-main-a" style="color: #62cf77;">咖啡</a></div>
                <div class="ui-block-c"><a href="#" class="ui-btn pageTwo-main-a" style="color: #9a8470;">甜品</a></div>
                <div class="ui-block-a"><a href="#" class="ui-btn pageTwo-main-a" style="color: #c08699;">串串</a></div>
                <div class="ui-block-b"><a href="#" class="ui-btn pageTwo-main-a" style="color: #fe4150;">烤肉</a></div>
                <div class="ui-block-c"><a href="#" class="ui-btn pageTwo-main-a" style="color: #53a9d5;">日料</a></div>
            </div>
            <p id="pageTwo-main-zuijin">最近搜索</p>
        </div>
        <!--<hr id="pageTwo-hr">-->
        <div id="pageTwo-hr"></div>

        <div id="pageTwo-main-jiLu-div">

        </div>
    </div>

    <div data-role="footer" class="pageTwo-footer" id="pageTwo-footer">
        清楚搜索记录
    </div>

</div>




<script src="../js/jqm/jquery-1.11.2.js"></script>
<script src="../js/jqm/jquery.mobile-1.4.5.js"></script>
<script src="../js/public.js"></script>
<script src="../js/jqm/angular1.2.3.js"></script>
<script src="../js/DiscoveryHome.js"></script>
</body>
</html>